<template>
  <div>
    <a-drawer
        title="详细信息"
        placement="right"
        :closable="true"
        :visible="visible"
        :width="600"
        :body-style="{ paddingBottom: '80px' }"
        @close="onClose"
    >
      <template>
        <a-descriptions layout="vertical" bordered :column="3">
          <a-descriptions-item label="租借卡号">
            {{ record.cardNumber }}
          </a-descriptions-item>
          <a-descriptions-item label="记录类型">
            {{ types[record.recordType] }}
          </a-descriptions-item>
          <a-descriptions-item label="金额">
            {{ record.money }}
          </a-descriptions-item>
          <template v-if="record.recordType === 0">
            <a-descriptions-item label="起点站">
              {{ record.begStationName }}
            </a-descriptions-item>
            <a-descriptions-item label="出发时间">
              {{ record.begTime | moment }}
            </a-descriptions-item>
            <a-descriptions-item label="终点站">
              {{ record.endStationName }}
            </a-descriptions-item>
            <a-descriptions-item label="到达时间">
              {{ record.endTime | moment }}
            </a-descriptions-item>
            <a-descriptions-item label="折算时间">
              {{ record.during }} 分钟（{{ Math.floor(record.during / 60) + 1 }}小时）
            </a-descriptions-item>
          </template>
          <a-descriptions-item label="备注">
            {{ record.note }}
          </a-descriptions-item>
        </a-descriptions>
      </template>
    </a-drawer>
  </div>
</template>
<script>
export default {
  props: {
    types: {
      type: Array,
      default: ['消费', '充值', '罚款'],
    }
  },
  data () {
    return {
      record: {},
      visible: false,
    }
  },
  methods: {
    show (record) {
      this.visible = true
      this.record = record
    },
    onClose () {
      this.visible = false
    }
  }
}
</script>
